<template>
  <el-dialog
    v-model="visible"
    width="1520px"
    custom-class="patrolDialog"
    :title="config.title || ''"
    :lock-scroll="false"
    @close="config.close"
  >
    <BaseForm ref="baseForm" :is-readonly="true" :default-value="dataForm" />
    <div class="tabContainer">
      <el-tabs v-model="curJob" @tab-click="handleClick">
        <el-tab-pane
          v-for="job in dataForm.jobList"
          :key="job.id"
          :label="job.deviceName"
          :name="job.id"
        >
          <div class="tabBox">
            <div class="iconfont icon-tubiao iconBox" style="color: #3e8ef7"></div>
            <div>
              <h1>任务状态</h1>
              <div class="dealStatus">
                <p><span>完成状态：</span>{{ jobStatus[job.status] }}</p>
                <p><span>任务人：</span>{{ job.userName || '-' }}</p>
                <p><span>完工时间：</span>{{ getTime(job.endTime) }}</p>
                <p><span>工作用时：</span>{{ job.duration || '-' + '小时' }}</p>
                <p><span>所属区域：</span>{{ job.rangeName || '-' }}</p>
                <p><span>所在项目：</span>{{ job.projectName || '-' }}</p>
              </div>
            </div>
          </div>
          <div class="tabBox">
            <div class="iconfont icon-tubiao iconBox" style="color: #3e8ef7"></div>
            <div class="dealInfo">
              <h1>任务详情</h1>
              <div>
                <p v-for="step in job.criterionDetail" :key="step.no">
                  <span>{{ step.no }}</span>
                  {{ job.deviceName }}， 方法及基准：{{ step.method }}
                  {{ getTime(step.startTime, 'Y-M-D H:m') }}
                </p>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <template #footer>
      <el-button type="primary" size="mini" @click="config.close">关 闭</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { getCurrentPatrolDetail } from '@/api/patrol'
import BaseForm from './baseForm.vue'
import { defineComponent, PropType } from 'vue'
import useDetail from '@/hooks/patrolDeal/useDetail'

export default defineComponent({
  components: { BaseForm },
  props: {
    config: {
      type: Object as PropType<DialogConfig>,
      default() {
        return {
          visible: false,
          title: '',
          close: () => {
            //do sth
          },
          currentId: ''
        }
      }
    }
  },
  setup(props: any, ctx) {
    return useDetail(props, ctx, getCurrentPatrolDetail)
  }
})
</script>

<style lang="scss">
.patrolDialog {
  .el-dialog__body {
    padding: 0 !important;
  }
}
</style>
>

<style lang="scss" scoped>
.message-text {
  margin: 10px 0 12px 20px;
  color: #39b01c;
  line-height: initial;
}
.flexFromItem {
  display: flex;
  justify-content: space-between;
}
.baseForm {
  padding: 0 32px 12px;
}
.tabContainer {
  border-bottom: 1px solid #ebebeb;
  padding: 0px 32px 24px;
  h1 {
    height: 22px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 22px;
    margin: 0;
    margin-bottom: 12px;
  }
  .tabBox {
    display: flex;
    .iconBox {
      margin-right: 12px;
      font-size: 16px;
    }
  }
  .dealStatus {
    display: flex;
    margin-bottom: 20px;

    p {
      margin-right: 80px;
      max-width: 300px;
      overflow: hidden; //超出的文本隐藏
      text-overflow: ellipsis; //溢出用省略号显示
      white-space: nowrap; //溢出不换行
      span {
        color: #a1adb4;
      }
    }
  }
  .dealInfo {
    p {
      height: 20px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 20px;
      margin-bottom: 16px;
      span {
        color: #a1adb4;
        display: inline-block;
        margin-right: 34px;
      }
    }
  }
}
</style>
